<template>
  <ve-modal title="处理" v-model="visible" @cancel="onCancel" @confirm="onConfirm">
    <ve-form ref="ve_form" :noClass="false" :model="form" :rules="rules">
      <ve-form-item prop="otherFeeDesc" label="处理原因" :borderBottom="false" labelPosition="top" required>
        <ve-input type="textarea" v-model="form.otherFeeDesc" placeholder="请输入处理原因" />
      </ve-form-item>
    </ve-form>
  </ve-modal>
</template>
<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import useFormFold from '@/hooks/useFormFold'
  const form = ref({})
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    plateNumber: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  })
  const emit = defineEmits(['update:visible', 'confirm'])
  const { foldStatus, foldValidate } = useFormFold([
    {
      key: '',
      props: ['otherFeeDesc'],
    },
  ])
  const visible = computed({
    get() {
      return props.visible
    },
    set(val) {
      form.value.otherFeeDesc = ''
      emit('update:visible', val)
    },
  })

  const onCancel = () => {
    emit('update:visible', false)
  }
  const rules = ref({
    otherFeeDesc: {
      required: true,
      message: '请输入处理原因',
    },
  })
  const ve_form = ref(null)
  const onConfirm = () => {
    ve_form.value.validate((valid, errors) => {
      if (valid) {
        emit('confirm', form.value.otherFeeDesc)
        form.value.otherFeeDesc = ''
      } else {
        foldValidate(errors)
        console.log('验证失败', errors)
      }
    })
  }
  onMounted(() => {
    form.value.otherFeeDesc = ''
  })
</script>
<style scoped lang="less"></style>
